import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue'),
    meta: {
      nav: ['注册'],
    },
  },

  {
    path: '/',
    redirect: '/login',
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView,
    children: [
      {
        path: 'index',
        name: '/home/index',
        component: () => import('../views/Index.vue'),
        meta: {
          nav: ['首页'],
        },
      },
      {
        path: 'user-list',
        name: 'user-list',
        component: () => import('../views/user/UserList.vue'),
        meta: {
          nav: ['用户管理', '用户列表'],
        },
      },
      {
        path: 'user-update/:userid',
        name: 'user-update',
        component: () => import('../views/user/UserUpdate.vue'),
        meta: {
          nav: ['用户管理', '用户列表', '修改用户信息'],
        },
      },
      {
        path: 'order-list',
        name: 'order-list',
        component: () => import('../views/order/OrderList.vue'),
        meta: {
          nav: ['订单管理', '订单列表'],
        },
      },
      {
        path: 'order-room/:oid',
        name: 'order-room',
        component: () => import('../views/order/Orderroom.vue'),
        meta: {
          nav: ['订单管理', '订单列表', '订单详情'],
        },
      },
      {
        path: 'room-list',
        name: 'room-list',
        component: () => import('../views/room/RoomList.vue'),
        meta: {
          nav: ['酒店管理', '酒店列表'],
        },
      },
      {
        path: 'hotelroom-list/:hid',
        name: 'hotelroom-list',
        component: () => import('../views/room/HotelRoomList.vue'),
        meta: {
          nav: ['酒店管理', '酒店房间'],
        },
      },
      {
        path: 'hotelroom-update/:rid',
        name: 'hotelroom-update',
        component: () => import('../views/room/HotelRoomUpdate.vue'),
        meta: {
          nav: ['酒店管理', '酒店房间', '修改酒店房间'],
        },
      },

      {
        path: 'spot-list',
        name: 'spot-list',
        component: () => import('../views/spot/SpotList.vue'),
        meta: {
          nav: ['景点管理', '景点列表'],
        },
      },

      {
        path: 'spot-update/:qid',
        name: 'spot-update',
        component: () => import('../views/spot/SpotUpdate.vue'),
        meta: {
          nav: ['景点管理', '修改景点'],
        },
      },
      {
        path: 'note-list',
        name: 'note-list',
        component: () => import('../views/note/NoteList.vue'),
        meta: {
          nav: ['攻略管理', '攻略列表'],
        },
      },
      {
        path: 'comment-list',
        name: 'comment-list',
        component: () => import('../views/comment/CommentList.vue'),
        meta: {
          nav: ['评论管理', '评论列表'],
        },
      },
    ],
  },

  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
  },
  {
    path: '/user/login',
    name: '/user/login',
    component: () => import('../views/user/Login.vue'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

/** 全局前置导航守卫 每当路由跳转到目标组件之前会自动执行箭头函数 */
import store from '../store'
router.beforeEach((to, from, next) => {
  // console.log('from', from)
  // console.log('to', to)
  // 判断目标地址是否是/user/login
  if (to.path == '/user/login') {
    next() //如果希望继续正常的跳转流程，则调用next()即可
  } else {
    // 如果不是跳转到登录页面，则需要验证vuex中是否有登录用户
    if (store.state.user) {
      // 如果已经登录，可以跳转
      next()
    } else {
      // 如果没有登录，则强制跳转到登录页
      router.push('/user/login')
    }
  }
})

export default router
